<template>
	<view class="p12 have-fixed-bottom">
		<view class="module-card c255">
			<view style="padding: 68rpx 48rpx;">
				<view class="fz15 u-font-bold">我的购物金</view>
				<view class="u-flex u-f-jsb mt22">
					<view class="u-flex fz14" style="align-items: flex-end;">
						<span class="fz28 u-font-bold lh28 mr5">{{userInfo.balance || 0}}</span>
						元
					</view>
					<span class="u-flex fz12" @click="toPage('/pages/user/balance/list')">
						查看明细
						<u-icon name="arrow-right" class="ml3"></u-icon>
					</span>
				</view>
			</view>
		</view>
		<view class="fz14 mt24">购物金充值</view>
		<view class="u-flex mt16" style="flex-wrap: wrap;">
			<view class="item" @click="curIndex=index" v-for="(item,index) in dataList" :key="index"
				:class="curIndex==index?'on':''">
				<view class="item-content">

					<view class="fz16 u-font-bold">{{item.name}}
					</view>
					<view class="fz12 c9 mt2">{{item.remark}}
					</view>

				</view>
			</view>
		</view>

		<view class="fz14 mt8">支付方式</view>
		<view class="u-flex mt16" style="flex-wrap: wrap;">
			<view class="item on">
				<view class="item-content">

					<view class="fz15 u-font-bold">微信支付
					</view>


				</view>
			</view>
		</view>
		<view class="fixed-bottom module-btn">
			<button type="primary" @click="toCreated" style="background: #70B52C;border-radius: 10rpx;"
				class="btn mt15 brs10">立即充值</button>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo:{},
				curIndex: 0,
				
				dataList:[],
			};
		},
		computed: {},
		onShow() {
			this.initData()

		},
		methods: {
			initData() {

				if (this.$db.get("userToken")) {
					this.$api.memberInfo({}, res => {
						if (res.code == 200) {
							this.userInfo = res.data;
						}
					})
					this.$api.walletRechargeList({}, res => {
						if (res.code == 200) {
							this.dataList = res.data;
						}
					})
				
				}

			},


			// 支付
			toWxPay(id) {
				this.$api.orderPay({
					id: id
				}, res => {
					if (res.code == 200) {


						let info = JSON.parse(res.data.displayContent)
						// 唤起微信支付。
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: info.timeStamp,
							nonceStr: info.nonceStr,
							package: info.packageValue,
							signType: info.paySign,
							paySign: info.paySign,
							success: (res) => {
								this.$db.set("isNewUser", false)
								this.$common.successToShow('支付成功', ress => {
									
										this.initData()
								})
							},
							fail: (err) => {
							}
						});

					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			toCreated() {
				let item = this.dataList[this.curIndex]
				let post = {
					id: item.id,
				}
				this.$api.walletRecharge(post, res => {
					if (res.code == 200) {
						
						
						this.toWxPay(res.data.payOrderId)
					} else {

						this.$common.errorToShow(res.msg)
					}
				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.module-card {
		background: url('https://diy.cdevelopment.cn/admin-api/infra/file/18/get/502a61a86bd6abe6545de8c5170f4bfc162d0b1993ddf1e96622e876df8eeb7e.png') no-repeat center;
		background-size: contain;
		width: 702rpx;
		height: 280rpx;
		margin: 0 auto;
	}

	.item {
		width: 33.33%;
		min-width: 33.33%;
		max-width: 33.33%;
		padding: 0 12rpx;
		margin-bottom: 30rpx;

		.item-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 120rpx;
			background: #F4F4F4;
			border-radius: 15rpx;
			text-align: center;
		}

		&.on {
			.item-content {
				background: rgba(112, 181, 44, 0.1);
				border: 1px solid #70B52C;
				color: #70B52C;

				.c9 {
					color: #70B52C !important;

				}
			}
		}

	}

	.loginbtn {
		font-size: 28rpx;
		background: linear-gradient(99deg, #00ACEB 0%, #4AC7F1 91%);
		color: #fff;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 50rpx;
		// box-shadow: 0 5px 7px 0 #0CA43C;
	}
</style>